<template>
 <div>
     <div id="order_header">
       <i class="el-icon-arrow-left" @click="back"></i>
       <span class="order_header_font">我的购物车</span>
       <router-link to="/recharge"><i class="el-icon-sell intomoney">充值</i></router-link>
       
     </div>
     <div id="order_body">
     <ul>
         <li class="added_goods" v-for="(item,index) in added_goodslist" :key='index '>

             <!-- <input type="checkbox"  class="checkboxes"> -->
            
            <div class="added_goodsimg">
                <img :src="item.detail_img1"  >
            </div>

              <div class="added_goodsname">
                  <div class="names">
                   <span class="goods_name">{{item.goods_name}}</span>
                   <br>
                    <span class="goods_cos"><i class="el-icon-coin"></i>{{item.cos}}</span>
                  </div>
            </div>
            <div class="added_goodsnum">
              
                <el-input-number size="small" v-model="item.num" @change="changenum(index)" class="selectnum"></el-input-number>
              
                

            </div>
            <div class="added_goods_totals">
                <i class="el-icon-close close" @click="deletegoods(index)" ></i>
                <div class="totals">    
                 <span class="totals_titile">总价：</span><br>
                 <span class="totals_in"><i class="el-icon-coin coin"></i>{{item.cos*item.num}}.00</span>
                </div>

            </div>

         </li>
     </ul>
</div>

<div id="shop_footer">
    <span class="total-font">总计：<i class="el-icon-coin"></i>{{total}}.00</span>
    
    <button @click="coinpay" >金币支付</button>
    <!-- <p>余额：{{coin}}</p> -->
    
</div>
    
 </div>
</template>

<script>
export default {
    inject:['reload'],
    data:function(){
        return{
      total:0,
      checked:true,
      added_goodslist:[],
      changecart:{} ,
      coin:0
        }

    },
      
  
    methods:{
      back:function () {
            this.$router.go(-1);
            
        },


        search: function (){//查询购物车商品
          this.$http.get('/api/users/shopping_cart').then(({
                    data,
                    config
                }) =>{
                   
                    this.added_goodslist=data.data;
                     var a=0;  //计算花费的金币总数
                    for(var i = 0;i<this.added_goodslist.length;i++ ){
                      a=a+this.added_goodslist[i].cos*this.added_goodslist[i].num;
                        this.total=a;
                        
                      }
                    
                });
                
    },
        coinpay:function(){     //更改用户  金币余额
          

            if(this.total<=this.$store.state.coin){
                
             

                //更改用户金币余额
                this.$http.put('/api/users/'+this.$store.state.id,{coin:this.$store.state.coin-this.total}).then(({
                      data,config
                   })=>{
                  
                  if(data.code==200){
                      this.search();
                     this.$message.success ('购买成功')
                  }else{
                   
                   this.$message.error('购买失败')
                    }
              })

            }else{
                this.$message.error('亲,您的余额不足哦~,请及时充值');

            }
           
         
          
        },
        deletegoods:function(index){//删除购物车商品
                   
                  this.$http.delete('/api/users/'+this.added_goodslist[index].id).then(({
                      data,config
                   })=>{
                   
                  if(data.code==200){
                    
                      this.search();
                    this.$message.success('删除商品数量成功')
                    
                  
                  }else{
                  this.$message.error('删除商品数量失败')
                    }
        })
 
        },
        changenum:function (index) {//更改商品数量
        
          
           this.$http.put('/api/users/mzh/'+this.added_goodslist[index].id,{num:this.added_goodslist[index].num}).then(({
                      data,config
                   })=>{
                   
                  if(data.code==200){
                       this.search();
                   

                     
                  
                  }else{
                   
                   this.$message.error('更改商品数量失败')
                    }
              })
                
             }
           },
   
   created:function(){
     
       this.search();
       
     
   },
 


}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
} 
.coin{
    color: orange;
}
.selectnum{
    margin: 70px 20px;
   
}
.intomoney{
    font-size: 30px;
    color: gold;
    margin-left: 130px;
}

.added_goodsimg img{
    width: 70%;
    height: 70%;
    margin-left: 40px;
    margin-top:20px;
}
.added_goodsimg{
 width: 25%;
 
 border-radius: 20px;
 

}
.names{
    margin-top:30px;
}
.goods_cos{
     font-size: 30px;
    color: orange;

}
.goods_name{
    margin-top:20px;
    font-size: 25px;
    color: orange;
}
.added_goodsname{
 width: 25%;
 


}
.added_goodsnum{
 width: 25%;


}
.added_goods_totals{
 width: 25%;
  
   border-radius: 20px;
}
.totals_in{
    color: rgb(240, 58, 3);
    font-size: 40px;
    
}
.totals_titile{
    color: rgb(3, 131, 250);
    font-size: 25px;
   
}
.totals{
    margin-top:40px;
}
.checkboxes{
    font-size: 20px;
    margin-top: 0;
}

#order_header{
    height: 80px;
    
    
    display: flex;
    align-items: center;
}
.order_header_font{
    font-size: 35px;margin-left: 260px;
    font-weight: bold;
    margin-left: 3.46667rem;
 
}
.added_goods{
    height: 200px;
    border: 1px solid rgb(226, 223, 223);
    border-radius: 20px;
    width: 95%;
    list-style: none;
    margin: 10px auto;
    display: flex;
    justify-content: space-around;

}
.close{
    float:right;
}
.total-font{
    color: orange;
    font-size: 35px;
}
#shop_footer{
    z-index: 9999;
    width: 100%;
    height: 80px;
    bottom: 0;
    position:fixed;
    background-color: rgb(247, 241, 241);
    border-bottom: 1px solid rgb(190, 184, 184);
    display: flex;
    align-items: center;
    justify-content: space-around;
   
}

</style>